import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)
// 路由就是根据网址的不同，将不同的网页反映给用户
// router-view显示的是当前路由地址对应的内容

const Home = () => import('views/home/Home')
const Detail = () => import('views/detail/Detail')
const City = () => import('views/city/City')
const User = () => import('views/user/User')

const routes = [
  {
    path: '/',
    redirect: '/home',
    meta: { index: 0 }
  },
  {
    path: '/home',
    name: 'Home',
    component: Home,
    meta: { index: 0 }
  },
  {
    path: '/city',
    name: 'city',
    component: City
  },
  {
    path: '/detail/:id',
    name: 'Detail',
    component: Detail,
    meta: { index: 2 },
    props: true
  },
  {
    path: '/user',
    name: 'User',
    component: User,
    meta: { index: 1 }
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router
